<template>
  <div class="wrap">
    <Navbar :appTitle="title" />
    <div class="wrap">
      <div class="head">
        <!-- <p class="title">
          <span>生产订单编号：</span>
          <span>SCDD202202070002</span>
        </p> -->
        <p class="content">
          <span class="key">生产负责人：</span>
          <span class="value">{{ detailData.chargeUserIdText }}</span>
        </p>
        <p class="content">
          <span class="key">生产工艺：</span>
          <span class="value"
            >{{ detailData.craftCode }}｜{{ detailData.craftName }}</span
          >
        </p>
        <p class="label">{{ $route.query.type == 0 ? "待排产" : "已排产" }}</p>
        <van-tabs
          style="width: 2rem; margin: 0 0 -0.14rem -0.24rem"
          v-model="active"
          :line-width="55"
          @change="change"
          v-if="$route.query.type == 1"
          color="#1890ff"
        >
          <van-tab title="生产信息"> </van-tab>
          <van-tab title="排产信息"> </van-tab>
        </van-tabs>
      </div>
      <div class="box" v-if="active == 0">
        <div class="title">
          <span class="icon"></span>
          <span class="titlekey">生产商品</span>
        </div>
        <div class="body">
          <p class="content">
            <span class="key">商品编号：</span>
            <span class="value">{{ detailData.goodsCode }}</span>
          </p>
          <p class="content">
            <span class="key">商品名称：</span>
            <span class="value">{{ detailData.goodsName }}</span>
          </p>
          <p class="content">
            <span class="key">商品规格：</span>
            <span class="value">{{ detailData.spec }}</span>
          </p>
          <p class="content">
            <span class="key">计划生产数量：</span>
            <span class="value" style="color: red">{{
              detailData.planProductNumUnitText
            }}</span>
          </p>
          <p class="content">
            <span class="key">承诺交期：</span>
            <span class="value">{{ detailData.promiseDate }}</span>
          </p>
        </div>
      </div>
      <div class="box" v-if="active == 0">
        <div class="title">
          <span class="icon"></span>
          <span class="titlekey">生产订单</span>
        </div>
        <div class="body">
          <p class="content">
            <span class="key">生产订单编号：</span>
            <span class="value">{{ detailData.code }}</span>
          </p>
          <p class="content">
            <span class="key">订单提交时间：</span>
            <span class="value">{{ detailData.createdTime }}</span>
          </p>
          <p class="content">
            <span class="key">订单提交人：</span>
            <span class="value">{{ detailData.createdByText }}</span>
          </p>
          <p class="content">
            <span class="key">销售合同编号：</span>
            <span class="value">{{ detailData.contractCode }}</span>
          </p>
          <p class="content">
            <span class="key">合同订购量：</span>
            <span class="value">{{ detailData.saleNumUnitText }}</span>
          </p>
        </div>
      </div>
      <div v-if="active == 1 && detailData.erpProductSchedulingInfoListVo">
        <div
          class="box"
          v-for="(item, index) in detailData.erpProductSchedulingInfoListVo"
          :key="index"
        >
          <div class="title">
            <span class="icon"></span>
            <span class="titlekey">{{ item.processName }}</span>
          </div>
          <div class="body">
            <p class="content">
              <span class="key">派工方式：</span>
              <span class="value">班组</span>
            </p>
            <p class="content">
              <span class="key">班组：</span>
              <span class="value">{{ item.operationTeamIdText }}</span>
            </p>
            <p class="content">
              <span class="key">生产设备：</span>
              <span class="value">{{ item.deviceIdText }}</span>
            </p>
            <!-- <p class="content">
              <span class="key">计划开始时间：</span>
              <span class="value">{{ item.planStartTime }}</span>
            </p>
            <p class="content">
              <span class="key">计划结束时间：</span>
              <span class="value">{{ item.planEndTime }}</span>
            </p> -->
            <p class="content">
              <span class="key" style="width: 1.07rem">计划生产周期：</span>
              <span class="value"
                >{{ moment(item.planStartTime).format("YYYY-MM-DD") }} 至
                {{ moment(item.planEndTime).format("YYYY-MM-DD") }}</span
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import moment from "moment";
import { getAction } from "@/api/manage";
import Clipboard from "clipboard";
export default {
  name: "proOrderDetail",
  components: { Navbar },
  data() {
    return {
      moment,
      title: this.$route.meta.title,
      detailData: {},
      active: 0,
      type: this.$route.query.type,
    };
  },
  computed: {},
  mounted() {},
  created() {
    getAction("/planmgt/erpProductScheduling/querySchedulingInfoById", {
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res, "详情");
      this.detailData = res.result;
    });
  },
  methods: {
    change(v) {
      console.log(v, this.active, "111");
    },
    copy() {
      var clipboard = new Clipboard(".copy");
      clipboard.on("success", (e) => {
        this.$toast("复制成功");
        //  释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        this.$toast("复制失败");
        // 释放内存
        clipboard.destroy();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/detail.scss";
</style>